<script setup>
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/modules/user.js'
const userStore = useUserStore()
const router = useRouter()
const goToHome = () => {
  router.push({path: '/'})
}
const goCenter = () => router.push('/user/base-info')
</script>
<template>
<div class="header-user">
  <div class="header-user-wrapper">
    <a-button type="link" class="btn" @click="goToHome">首页</a-button>
    <div @click="goCenter" class="avatar" v-if="userStore.userInfo.avatar"><img :src="userStore.userInfo.avatar " alt=""> <span class="name">{{ userStore.userInfo.nickname }}</span> </div>
  </div>
</div>
</template>
<style lang="less" scoped>
.header-user {
  border-bottom: 1px solid #eee;
  padding: 0 40px;
  &-wrapper {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    width: 1300px;
  }
  .name {
    margin-left: 5px;
    font-weight: 600;
    font-size: 16px;
  }
  .avatar {
    height: 72px;
    line-height: 72px;
    img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }
  }
  .btn {
  height:72px;
  color: #0d141e;
  font-size: 18px;
  font-weight: 500;
  opacity: .7;
  &:hover {
    opacity: 1;
  }
}
}
</style>
